<template>
  <view class="container">
    <view class="tabBox">
      <view
        :class="selectTab == 0 ? 'active tabItem' : 'tabItem'"
        @click="handleTab(0)"
      >
        深蹲
      </view>
      <view
        :class="selectTab == 1 ? 'active tabItem' : 'tabItem'"
        @click="handleTab(1)"
      >
        卧推
      </view>
      <view
        :class="selectTab == 2 ? 'active tabItem' : 'tabItem'"
        style="border: none"
        @click="handleTab(2)"
      >
        硬拉
      </view>
    </view>
    <view class="improveBox">
      <view class="text">
        已提升
        <view class="IW">
          {{ IW }}
        </view>
        KG
      </view>
      <view class="dDW" v-if="DW >= 0">
        ↑{{ DW }}
        <view class="kg"> KG </view>
      </view>
      <view class="xDW" v-else>
        ↓{{ DW }}
        <view class="kg"> KG </view>
      </view>
    </view>
    <view class="newRm">
      <view class="left">
        <view class="title"> 最新1RM </view>
        <text class="value">
          {{ newRm }} </text
        >KG
      </view>
      <view class="right">
        <view class="title"> 测量模式 </view>
        <view class="value" style="font-family: '优设标题黑'; font-size: 24px">
          <!-- 估算 -->

          <!-- Picker 组件 -->
          <picker mode="selector" :range="options" @change="pickerChange">
            <view class="picker-selected juzhong">
              {{ mode }}
            </view>
          </picker>
        </view>
      </view>
      <view class="time">
        {{ testTime }}
      </view>
    </view>
    <view class="echartBox">
      <view class="titleRow">
        <text class="title"> 1RM趋势 </text>
        <text class="lookBtn" @click="lookAllData"> 查看完整曲线 </text>
      </view>
      <l-echart ref="chartRef" @finished="getData"></l-echart>
    </view>
  </view>
</template>

<script>
import * as echarts from "../static/echarts.min.js";
import { getE1rmHistory } from "../../apis/e1rm.js";
export default {
  data() {
    return {
      IW: 0,
      DW: 0,
      newRm: 0,
      modal: "估算",
      testTime: "2024/11/15 15:03",
      selectTab: 0,
      mode: "简单测试",
      options: ["简单测试", "复杂测试"],
      dataSource: [], //折线图数据源
      option: {
        tooltip: {
          triggerOn: "none",
          formatter: function (params) {
            return (
              "X: " +
              params.data[0].toFixed(2) +
              "<br>Y: " +
              params.data[1].toFixed(2)
            );
          },
        },
        xAxis: {
          type: "time", // 使用时间轴
          boundaryGap: false,
          axisLabel: {
            fontSize: 8,
            formatter: function (value) {
              var date = new Date(value);
              var monthDay = date.getMonth() + 1 + "-" + date.getDate(); // 月-日
              var year = date.getFullYear(); // 年
              return monthDay; // 双行显示，\n 换行
            },
          },
          splitLine: {
            show: false, // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: "#5f5f61",
            },
          },
        },
        yAxis: {
          name: "1RM",
          type: "value",
          axisLine: {
            show: false, // 不显示坐标轴线
            lineStyle: {
              color: "#5f5f61",
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          splitLine: {
            lineStyle: {
              color: ["#5f5f61"],
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            show: true,
            // 设置初始显示的数据范围，让其一开始就只显示 7 个数据对应的范围
            start: 0,
            end: 0,
            xAxisIndex: 0,
            // 以下是可用于调整滑动交互效果的一些属性，可按需设置
            zoomLock: false, // 是否锁定缩放功能，设置为 true 则只能滑动不能缩放
          },
        ],
        series: [
          {
            data: [],
            smooth: true,
            symbolSize: 8,
            type: "line",

            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: "#000",
              },
            },
            label: {
              show: true,
              // 可以设置标签的位置、样式等更多细节属性
              position: "top", // 这里设置标签显示在点的上方，还可以是 'bottom'、'left'、'right' 等
              formatter: function (param) {
                // param.dataIndex 可以获取到当前数据点在数据系列中的索引
                return Number(param.data[1]).toFixed(2);
              },
            },
          },
        ],
      },
    };
  },
  onLoad(option) {},
  mounted() {
    // this.getData();
  },
  methods: {
    async getE1rmHistoryApi(data) {
      const chart = await this.$refs.chartRef.init(echarts);
      getE1rmHistory(data).then((res) => {
        let iindex = this.mode == "简单测试" ? 1 : 0;
        let dataSource = [];
        if (res.data) {
          this.DW = res.data
            ? res.data.dwResponseList[iindex].dw.toFixed(2)
            : 0;
          this.IW = res.data
            ? Math.abs(res.data.oneWResponseList[iindex].oneW).toFixed(2)
            : 0;
          res.data.oneRepMaxHistoryList[
            this.mode == "简单测试" ? "大众模式" : "复杂模式"
          ].forEach((v) => {
            dataSource.push([v.oneRmTime, v.oneRm]);
          });
          console.log("图表数据源", dataSource);
          var date = new Date(dataSource[dataSource.length - 1][0]);
          var monthDay = date.getMonth() + 1 + "-" + date.getDate(); // 月-日
          var year = date.getFullYear(); // 年
          this.testTime = year + "-" + monthDay;
          this.newRm = dataSource[dataSource.length - 1][1];
          this.dataSource = dataSource;
          this.option.series[0].data = dataSource;
          // this.option.dataZoom[0].end = (7 / dataSource.length) * 100
          this.option.dataZoom[0].end = 100;
        }
        chart.setOption(this.option);
      });
    },
    pickerChange(e) {
      console.log(1);
      this.mode = this.options[e.detail.value];
      this.getE1rmHistoryApi({
        type:
          this.selectTab == 0 ? "深蹲" : this.selectTab == 1 ? "卧推" : "硬拉",
      });
    },
    // 获取数据
    async getData() {
      this.getE1rmHistoryApi({
        type:
          this.selectTab == 0 ? "深蹲" : this.selectTab == 1 ? "卧推" : "硬拉",
      });
    },
    // 查看完整数据
    lookAllData() {
      uni.navigateTo({
        url:
          "/pagesTool/allHistoryData/allHistoryData?dataSource=" +
          JSON.stringify(this.dataSource),
      });
    },
    // 切换Tab
    handleTab(e) {
      this.selectTab = e;
      // 此处重新请求
      this.getData();
    },
  },
};
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  overflow-y: scroll !important;
  background: #f2f2f3;
  color: #333;
  padding-bottom: 50rpx;
  box-sizing: border-box;

  font-family: "优设标题黑";

  .tabBox {
    width: 100%;
    height: 39px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #6e58aa;
    display: flex;
    font-family: "优设标题黑";
    font-size: 24px;
    color: #6e58aa;

    .tabItem {
      flex: 1;
      text-align: center;
      line-height: 39px;
      border-right: 1px solid #6e58aa;
    }

    .active {
      background-color: #6e58aa;
      color: #fff;
    }
  }

  .improveBox {
    width: 100%;
    height: 89px;
    border-radius: 5px;
    position: relative;
    text-align: center;
    margin-top: 17px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.3);

    .text {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      .IW {
        font-size: 48px;
        color: #6e58aa;
        margin: 0 10rpx;
        line-height: 89px;

        font-family: "优设标题黑";
      }
    }

    .dDW {
      position: absolute;
      right: 15rpx;
      bottom: 10px;
      color: rgba(212, 48, 48, 1);
      display: flex;
      align-items: flex-end;
    }

    .xDW {
      position: absolute;
      right: 15rpx;
      bottom: 20px;
      color: #43cf7c;
      display: flex;
      align-items: flex-end;
    }

    .kg {
      color: #000;
      margin-left: 10rpx;
      font-size: 12px;
    }
  }

  .newRm {
    width: 100%;
    height: 89px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.3);
    position: relative;
    margin-top: 17px;
    display: flex;
    padding: 10px;

    .left {
      font-size: 16px;
      margin-right: 25px;

      .title {
      }

      .value {
        margin-top: 10px;
        color: #6e58aa;
        font-size: 24px;
        font-family: "优设标题黑";
        display: inline-block;
      }
    }

    .right {
      font-size: 16px;

      .title {
      }

      .value {
        margin-top: 10px;
        color: #6e58aa;
      }
    }

    .time {
      position: absolute;
      top: 9px;
      right: 4px;
      font-size: 12px;

      color: rgba(110, 88, 170, 0.5);
    }
  }

  .echartBox {
    margin-top: 17px;
    width: 100%;
    height: 226px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.3);

    border-radius: 8px;

    .titleRow {
      .title {
        display: inline-block;
        font-size: 16px;
        margin-left: 10rpx;
        margin-top: 5rpx;
        font-size: 24px;
        font-family: "优设标题黑";
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
        color: #6e58aa;
      }

      .lookBtn {
        float: right;
        margin-top: 8px;
        margin-right: 7px;
        font-family: "优设标题黑";
        color: rgba(110, 88, 170, 0.5);
      }
    }
  }
}
</style>
